import React, { useState } from 'react';
import { NavBar, Button, Toast } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import styles from './TuitionPayment.module.css';

function TuitionPayment() {
  const navigate = useNavigate();
  const [totalAmount] = useState(5000);
  const [educationFee] = useState(2000);
  const [bookFee] = useState(2000);
  const [daysLeft] = useState(1);

  const feeDetails = [
    { semester: '大三（上学期）', amount: 5000, status: '已缴' },
    { semester: '大二（下学期）', amount: 5000, status: '已缴' },
    { semester: '大二（上学期）', amount: 5000, status: '已缴' },
    { semester: '大一（下学期）', amount: 5000, status: '已缴' },
    { semester: '大一（上学期）', amount: 5000, status: '已缴' }
  ];

  const handlePayment = () => {
    Toast.show({
      content: '缴费成功',
      position: 'center',
    });
    setTimeout(() => {
      navigate('/cloud-payment');
    }, 1500);
  };

  return (
    <div className={styles.container}>
      <NavBar onBack={() => navigate('/cloud-payment')} className={styles.navBar}>
        缴费
      </NavBar>
      
      <div className={styles.content}>
        <div className={styles.alertSection}>
          <div className={styles.alertIcon}>🔊</div>
          <span className={styles.alertText}>
            距离缴费到期还有{daysLeft}天，请尽快完成缴费
          </span>
        </div>

        <div className={styles.feeCard}>
          <div className={styles.feeHeader}>
            <div className={styles.totalAmount}>
              <span className={styles.amountLabel}>需缴费（元）</span>
              <span className={styles.amount}>{totalAmount.toLocaleString()}</span>
            </div>
            <div className={styles.feeBreakdown}>
              <div className={styles.feeItem}>
                <span>教育费</span>
                <span>{educationFee}</span>
              </div>
              <div className={styles.feeItem}>
                <span>书本费</span>
                <span>{bookFee}</span>
              </div>
            </div>
          </div>
        </div>

        <div className={styles.historySection}>
          <h3 className={styles.sectionTitle}>缴费明细</h3>
          <div className={styles.historyList}>
            {feeDetails.map((item, index) => (
              <div key={index} className={styles.historyItem}>
                <span className={styles.semester}>{item.semester}</span>
                <span className={styles.historyAmount}>已缴{item.amount}</span>
              </div>
            ))}
          </div>
        </div>

        <Button 
          block 
          color='primary' 
          size='large' 
          className={styles.payButton}
          onClick={handlePayment}
        >
          确认缴费
        </Button>
      </div>
    </div>
  );
}

export default TuitionPayment;